<style scoped>
  @import "/static/zwk/swiper-3.4.2.min.css";

  .contact{
    position: relative;
  }

  .topbar{
    position: absolute;
    width:100%;
    height:.38rem;
    top:.3rem;
    left:0rem;
    z-index:10;
  }

  .topbar .areaselect{
    position: absolute;
    top:0rem;
    left:0rem;
    height:.38rem;
    line-height:.38rem;
    padding:0rem .1rem;
    color:#FFF;
    font-size:.2rem;
  }

  .topbar .areaselect span{
    vertical-align: middle;
  }

  .topbar .areaselect span.icon{
    background-image: url(/static/zwk/arrow_down.svg);
    width: 0.2rem;
    height: 0.2rem;
    background-size: .2rem .2rem;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
  }

  .topbar .message{
    position: absolute;
    top:0rem;
    right:.1rem;
    width: 0.5rem;
    height: 0.38rem;
    text-align: center;
    font-size:.14rem;
    color:#FFF;
  }

  .topbar .message div.icon{
    margin:0rem auto;
    background-image: url(/static/zwk/message.svg);
    width: 0.3rem;
    height: 0.3rem;
    background-size: .3rem .3rem;
    background-position: center;
    background-repeat: no-repeat;
  }

  .topbar .message p{
    margin-top:-.05rem;
  }

  .topbar .txtbox{
    position: absolute;
    top:0rem;
    left:50%;
    margin-left:-1.15rem;
    width:2.3rem;
    height: 0.38rem;
    border-radius:.19rem;
    border:.01rem solid rgba(0,0,0,.2);
    background-color: rgba(255,255,255,.4);
  }
  
  .topbar .txtbox span.icon
  {
    background-image: url(/static/zwk/search.svg);
    width: 0.2rem;
    height: 0.2rem;
    background-size: .2rem .2rem;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    float: left;
    margin:.1rem;
  }

  .topbar .txtbox input{
    width:1.7rem;
    height: 0.38rem;
    line-height:.38rem;
    display: block;
    border:none;
    outline:none;
    background-color: transparent;
    float: left;
    color:#333;
    font-size:.16rem;
  }

  .main{
    height:calc( 100vh - .6rem);
    position: relative;
    overflow: auto;
  }

  .box2{
    box-sizing: border-box;
    height: 1.15rem;
    padding-top:.1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items:center;
    border-bottom:.01rem solid #d3d3d3;
    background-color: #FFF;
  }

  .box2 li{
    width:.667rem;
    height:.9583rem;
    background-repeat: no-repeat;
    background-size: .667rem .667rem;
    background-position: 0rem 0rem;
    text-align: center;
  }

  .box2 li p{
    font-size:.16rem;
    margin-top:.73rem;
    font-weight: bold;
    font-style: italic;
  }

  ul.category{
    overflow: auto;
    background-color: #FFF;
    border-bottom:.01rem solid #d3d3d3;
    padding-bottom: .1073rem;
  }

  ul.category li{
    width:25%;
    height:.874rem;
    float: left;
    background-repeat: no-repeat;
    background-position: center .1rem;
    background-size: .51175rem .51175rem;
    font-size:.15rem;
    text-align: center;
  }

  ul.category li p{
    margin-top:.71rem;
    color:#595959;
  }

  .supplierbox{
    margin-top:.0958rem;
    border-top:.015rem solid #d3d3d3;
    background-color: #FFF;
  }

  .supplierbox .title{
    height: 0.4408rem;
    line-height: .4408rem;
    font-size:.18rem;
    text-align: center;
    border-bottom:.01rem solid #d3d3d3;
  }

  .supplierlist{
    overflow: auto;
  }

  .supplierlist li{
    width:calc( 100vw );
    box-sizing: border-box;
    padding:.115rem;
    border-bottom:.01rem solid #d3d3d3;
    position: relative;
  }

  .supplierlist li img{
    display: block;
    float: left;
    width:0.85675rem;
    height: 0.85675rem;
    border-radius: .1rem;
  }

  .supplierlist li div.noimg{
    display: block;
    float: left;
    width:0.85675rem;
    height: 0.85675rem;
    border-radius: .1rem;
    box-sizing: border-box;
    font-size:.2rem;
    border:.01rem solid #000;
  }

  .supplierlist li div.info{
    float: left;
    margin-left:.1rem;
  }

  .supplierlist li div.info p.name{
    font-size:.18rem;
  }

  .supplierlist li div.info p.rate{
    margin-top:.1rem;
    font-size:.18rem;
  }

  .supplierlist li div.info p.rate i{
    width:.2rem;
    height: 0.2rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    display: inline-block;
    margin-right:-0.05rem;
  }

  .supplierlist li div.info p.rate i.star{
    background-image: url(/static/zwk/star.png);
  }

  .supplierlist li div.info p.rate i.star0{
    background-image: url(/static/zwk/star0.png);
  }

  .supplierlist li div.info p.rate span{
    margin-left:.1rem;
    color:#3DA3F5;
  }

  .supplierlist li div.info p.dis {
    font-size:.16rem;
    color:#737373;
  }

  .supplierlist li div.info p.dis span.address{
    max-width: 1rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    display: inline-block;
  }

  .supplierlist li div.info p.dis span.distance{
   color:#FF0000;
  }

  .supplierlist li div.fx{
    position: absolute;
    height:.97175rem;
    line-height: .97175rem;
    font-size:.25rem;
    color:#FF0000;
    right: 0rem;
    top: 0rem;
  }

  .supplierlist li div.fx span{
    font-size:.16rem;
    margin-right:.02rem;
  }
</style>
<style>
  /* swiper 补充*/
  .swiper-container-horizontal>.swiper-pagination-bullets{
    height:.1rem;
  }

  .swiper-pagination-bullet{
    border:.01rem solid #FFF;
    background-color: transparent;
    opacity: 1;
    vertical-align:top;
  }

  .swiper-pagination-bullet-active{
    border:.01rem solid #FFF;
    background-color: #FFF;
  }
</style>


<template>
<div class="contact">
  <div class="topbar">
    <div class="areaselect">
      <span>涡阳</span>
      <span class="icon"></span>
    </div>
    <div class="message">
      <div class="icon"></div>
      <p>消息</p>
    </div>  
    <div class="txtbox">
      <span class="icon"></span>
      <input type="text" placeholder="搜索一下你就知道">
      <div class="cb"></div>
    </div>
  </div>

  <!--main-->
  <div class="main">
      <swiper :options="swiperOption" :not-next-tick="notNextTick" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="(item,index) in ads" :key="item.id">
          <a :href="item.link_url" target="_blank" style="display:block;">
            <img :src="item.img" alt="" style="display:block;width:calc( 100vw )">
          </a>
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>

      <ul class="box2">
        <li style="background-image:url(/static/zwk/indexfukuan@2x.png)">
          <p>付款</p>
        </li>
        <li style="background-image:url(/static/zwk/indexjinritehui@2x.png)">
          <p>今日特惠</p>
        </li>
        <li style="background-image:url(/static/zwk/indexzhuanqian@2x.png)">
          <p>赚钱</p>
        </li>
      </ul>


      <ul class="category">
        <li v-for="(item,index) in categorys" :key="item.id" :style="{'background-image':'url('+item.img+')'}" @click="filterSup(item.id)">
          <p>{{item.name}}</p>
        </li>
      </ul>

      <div class="supplierbox">
        <div class="title">精选店铺</div>
        <ul class="supplierlist">
          <li v-for="(item,index) in showSuppliers" :key="item.id" >
            <img :src="item.logo" v-if="item.logo!==''" alt="">
            <div class="noimg" v-if="item.logo===''">么得图片</div>
            <div class="info">
              <p class="name">{{item.name}}</p>
              <p class="rate">
                <i :class="{'star':parseInt(item.score)>=1,'star0':parseInt(item.score)<1}"></i>
                <i :class="{'star':parseInt(item.score)>=2,'star0':parseInt(item.score)<2}"></i>
                <i :class="{'star':parseInt(item.score)>=3,'star0':parseInt(item.score)<3}"></i>
                <i :class="{'star':parseInt(item.score)>=4,'star0':parseInt(item.score)<4}"></i>
                <i :class="{'star':parseInt(item.score)>=5,'star0':parseInt(item.score)<5}"></i>
                <span>{{item.score}}分</span>
              </p>
              <p class="dis">
                <span class="address">{{item.address.substr(item.address.indexOf(item.circle)+item.circle.length)}}</span>
                <span class="distance">{{item.distance}}</span>
              </p>
            </div>
            <div class="fx"><span>立返</span>{{item.discount}}%&ensp;</div>
            <div class="cb"></div>
          </li>
        </ul>
      </div>

  </div>
  <!--/main-->

</div>
</template>
<script>
import axios from 'axios'
import { swiper, swiperSlide } from 'vue-awesome-swiper'

export default {
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      ads: [],
      categorys: [],
      suppliers: [],
      showSuppliers: [],

      notNextTick: true,
      swiperOption: {
          // swiper options 所有的配置同swiper官方api配置
        autoplay: 2000,
        direction: 'horizontal',
        setWrapperSize: true,
        autoHeight: true,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        observeParents: true,
        // preventClicks: false, // 可以跳转
          // if you need use plugins in the swiper, you can config in here like this
          // 如果自行设计了插件，那么插件的一些配置相关参数，也应该出现在这个对象中，如下debugger
        debugger: true,
          // swiper callbacks
          // swiper的各种回调函数也可以出现在这个对象中，和swiper官方一样
        onTransitionStart (swiper) {
          console.log(swiper)
        }
          // more Swiper configs and callbacks...
          // ...
      }

    }
  },
  mounted () {
    axios.get('http://www.lexbst.com/server.php/api/v1/supplier/main?agent_id=1&main=1&scale=0').then((res) => {
      this.ads = [...res.data.data.ad]
      this.categorys = [...res.data.data.category]
      this.suppliers = [...res.data.data.supplier]
      this.showSuppliers = this.suppliers
    })
  },
  methods: {
    filterSup (id) {
      this.showSuppliers = this.suppliers.filter((item) => { return item.cat_id === id })
    }
  }
}
</script>

